<template>
  <div id="app">
    <el-row>
      <el-col :span="4" class="el-col">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :router="true"
          active-text-color="#3399de">

          <!-- 员工管理 -->
          <el-menu-item index="manager" v-if="userRole === 0 " >
            <i class="el-icon-s-custom"></i> <!-- 更改此处的图标 -->
            <span slot="title">员工管理</span>
          </el-menu-item>

          <el-menu-item index="managerAdmin"  v-if="userRole === 2" >
            <i class="el-icon-s-custom"></i> <!-- 更改此处的图标 -->
            <span slot="title">员工管理</span>
          </el-menu-item>

          <!-- 用户管理 -->
          <el-menu-item index="userInfo" v-if="userRole !== 3 && userRole !== 4">
            <i class="el-icon-s-custom"></i> <!-- 更改此处的图标 -->
            <span slot="title">用户管理</span>
          </el-menu-item>

          <!-- 废品分类管理 -->
          <el-menu-item index="waste" v-if="userRole === 0">
            <i class="el-icon-truck"></i> <!-- 更改此处的图标 -->
            <span slot="title">废品分类管理</span>
          </el-menu-item>

          <!-- 废品分类管理 -->
          <el-menu-item index="wasteAdmin" v-if="userRole === 1 || userRole === 2">
            <i class="el-icon-truck"></i> <!-- 更改此处的图标 -->
            <span slot="title">废品分类管理</span>
          </el-menu-item>

          <!-- 订单管理 -->
          <el-menu-item v-if="userRole === 0" index="adminOrder">
            <i class="el-icon-document"></i>
            <span slot="title">商家订单管理</span>
          </el-menu-item>
          <el-menu-item v-if="userRole === 1 || userRole === 2" index="siteOrder">
            <i class="el-icon-document"></i>
            <span slot="title">站点订单管理</span>
          </el-menu-item>
          <el-menu-item v-if="userRole === 3" index="order">
            <i class="el-icon-document"></i>
            <span slot="title">临时工订单管理</span>
          </el-menu-item>

          <!-- 统计管理 -->
          <el-menu-item index="statistics" v-if="userRole === 0">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">统计管理</span>
          </el-menu-item>

          <!-- 公告管理 -->
          <el-menu-item index="notice">
            <i class="el-icon-bell"></i>
            <span slot="title">公告管理</span>
          </el-menu-item>

          <!-- 公司信息管理 -->
          <el-menu-item  index="company">
            <i class="el-icon-office-building"></i>
            <span slot="title">公司信息管理</span>
          </el-menu-item>

          <!-- 权限管理 -->
          <el-menu-item  v-if="userRole === 0" index="permission">
            <i class="el-icon-lock"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>

          <!-- 留言管理 -->
          <el-menu-item index="reply"  v-if="userRole !== 4 && userRole !== 3">
            <i class="el-icon-chat-dot-round"></i> <!-- 更改此处的图标 -->
            <span slot="title">留言管理</span>
          </el-menu-item>

          <!-- 站点信息管理 -->
          <el-menu-item index="site" v-if="userRole === 0 || userRole === 1">
            <i class="el-icon-location-outline"></i> <!-- 更改此处的图标 -->
            <span slot="title">站点信息管理</span>
          </el-menu-item>

          <!-- 站点信息管理 -->
          <el-menu-item index="site-info" v-if="userRole === 2 || userRole === 3">
            <i class="el-icon-location-outline"></i> <!-- 更改此处的图标 -->
            <span slot="title">站点信息管理</span>
          </el-menu-item>

          <!-- 用户沟通 -->
          <el-menu-item index="chat" v-if="userRole === 4">
            <i class="el-icon-message-solid"></i> <!-- 更改此处的图标 -->
            <span slot="title">用户沟通</span>
          </el-menu-item>

          <!-- 登录管理 -->
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>登录管理</span>
            </template>
            <el-menu-item-group router="false">
              <el-menu-item @click="dialogVisible = true">
                <i class="el-icon-menu"></i>
                修改密码
              </el-menu-item>
              <el-menu-item @click="exit">
                <i class="el-icon-s-unfold"></i>
                退出登录
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20" class="main-content">
        <router-view></router-view>
      </el-col>
    </el-row>
    <div>
      <!-- 修改密码的对话框 -->
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="400px"
        @close="resetForm('passwordForm')"
      >
        <!-- 修改密码的表单 -->
        <el-form
          :model="passwordForm"
          :rules="rules"
          ref="passwordForm"
          label-width="100px"
          @submit.native.prevent
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" show-password @input="checkPasswords"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" show-password @input="checkPasswords"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" show-password @input="checkPasswords"></el-input>
          </el-form-item>
        </el-form>

        <!-- 对话框底部的操作按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePassword">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义验证规则，确保新密码和确认新密码一致
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validateOldPassword = (rule, value, callback) => {
      if (this.passwordForm.newPassword && value === this.passwordForm.newPassword) {
        callback(new Error('新密码不能与旧密码相同!'));
      } else {
        callback();
      }
    };

    return {
      dialogVisible: false, // 控制对话框的显示/隐藏
      manager: {
        token: JSON.parse(localStorage.getItem("loginUser")).id,
      },
      userRole: null, // 添加用户角色状态
      passwordForm: {
        username: '',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'change' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' },
          { validator: validateOldPassword, trigger: 'change' } // 确保旧密码不能与新密码相同
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'change' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'change' },
          { validator: validatePass2, trigger: 'change' }
        ]
      },
    };
  },
  methods: {
    // 从token中获取用户角色
    getUserRoleFromToken() {
      try {
        const loginUser = JSON.parse(localStorage.getItem("loginUser"));
        console.log('loginUser:', loginUser);
        if (loginUser && loginUser.token) {
          const base64Url = loginUser.token.split('.')[1];
          const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
          const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join(''));

          const payload = JSON.parse(jsonPayload);
          console.log('Token payload:', payload);
          // 修改role的解析逻辑
          if (payload.role !== undefined && payload.role !== null) {
            this.userRole = Number(payload.role);
          } else {
            this.userRole = null;
          }
          console.log('Parsed userRole:', this.userRole);
        }
      } catch (error) {
        console.error('解析token失败:', error);
        this.userRole = null;
      }
    },
    onValidate(prop, isValid) {
      // 每次验证后检查整个表单是否有效
      this.$refs.passwordForm.validate((valid) => {
        console.log('表单验证结果:', valid);
        // 不要在这里直接修改 isFormValid
      });
    },
    checkPasswords() {
      // 手动触发旧密码的验证
      if (this.passwordForm.oldPassword && this.passwordForm.newPassword) {
        this.$refs.passwordForm.validateField('oldPassword', (errorMessage) => {
          // 不要在这里直接修改 isFormValid
        });
      }
    },
    changePassword(){
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.$http.put("/zsd-permission/admin-info/updatePassword",{
            oldPassword: this.passwordForm.oldPassword,
            newPassword: this.passwordForm.newPassword,
          }).then(resp=>{
            if(resp.data.code==200){
              this.exit();
            }else{
              alert("密码有误请重新输入");
            }
          })
        } else {
          alert("请先确认账号密码格式")
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // 重置表单时不需要手动设置 isFormValid，因为它会自动更新
    },
    submitForm() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          alert('提交成功!');
          this.dialogVisible = false; // 关闭对话框
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    },
    exit(){
      sessionStorage.removeItem("loginUser")
      this.$router.push("/login")
    }
  },
  mounted() {
    this.getUserRoleFromToken(); // 在组件挂载时获取用户角色
  }
};
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
  background-color: #e6e6e6;
}

/* 设置 .el-menu-vertical-demo 的最小高度为 100vh */
.el-menu-vertical-demo {
  height: 100vh;
}
.el-col {
  text-align: left;
}

/* 自定义 el-dialog 的样式 */
.el-dialog {
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.19); /* 阴影 */
  width: 400px; /* 固定宽度 */
  height: 450px; /* 固定高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Roboto', sans-serif; /* 使用 Roboto 字体 */
}
.el-dialog__title {
    line-height: 24px;
    font-size: 22px;
    color: #303133;
}
/* 自定义 el-dialog 的标题栏样式 */
.el-dialog__header {
  height: 40px;
  padding: 16px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  line-height: 40px;
  flex-shrink: 0; /* 确保标题栏不被压缩 */
  font-size: 22px; /* 增大标题字体 */
  font-weight: 600; /* 加粗标题字体 */
}

/* 自定义 el-dialog 的内容区样式 */
.el-dialog__body {
  padding: 20px;
  flex-grow: 1; /* 让内容区占据剩余空间 */
  overflow-y: auto; /* 内容过多时允许滚动 */
  font-size: 14px; /* 增大内容字体 */
  font-weight: 500; /* 加粗内容字体 */
}

/* 自定义 el-dialog 的底部按钮区样式 */
.el-dialog__footer {
  height: 100px;
  padding: 25px 20px 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  flex-shrink: 0; /* 确保底部按钮区不被压缩 */
  font-size: 16px; /* 增大按钮字体 */
  font-weight: 500; /* 加粗按钮字体 */
}

/* 自定义 el-dialog 的关闭按钮样式 */
.el-dialog__headerbtn {
  top: 16px;
  right: 16px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #909399;
  font-size: 18px;
}

.el-dialog__headerbtn .el-dialog__close:hover {
  color: #3399de;
}

/* 自定义表单样式 */
.el-form-item {
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-input__inner {
  border-radius: 6px;
  height: 40px; /* 调整输入框高度 */
  line-height: 40px; /* 调整输入框行高 */
  font-size: 16px; /* 增大输入框字体 */
  font-weight: 500; /* 加粗输入框字体 */
}

/* 自定义按钮样式 */
.el-button--primary {
  background-color: #3399de;
  border-color: #3399de;
}

.el-button {
  height: 40px; /* 调整按钮高度 */
  padding: 0 20px;
  font-size: 16px; /* 增大按钮字体 */
  font-weight: 600; /* 加粗按钮字体 */
}

.el-button--primary:hover {
  background-color: #40a0df;
  border-color: #40a0df;
}

/* 确保对话框内容不会超出容器 */
.el-dialog .el-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 自定义表单标签样式 */
.el-form-item__label {
  font-size: 14px; /* 增大标签字体 */
  font-weight: 600; /* 加粗标签字体 */
}

</style>
